iT邦幫忙

2024 iThome 鐵人賽

DAY 9
0
自我挑戰組

自學vue~點亮Roadmap過程系列 第 9

vue3鍊成術第九天-列表渲染(實作)

  • 分享至 

  • xImage
  •  

列表渲染

我們可以使用 v-for 指令來渲染一個基於源數組的列表:

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

這裡的 todo 是一個局部變量,表示當前正在迭代的數組元素。它只能在 v-for 所綁定的元素上或是其內部訪問,就像函數的作用域一樣。

注意,我們還給每個 todo 對象設置了唯一的 id,並且將它作為特殊的 key 屬性綁定到每個 li。key 使得 Vue 能夠精確的移動每個 li,以匹配對應的對象在數組中的位置。

更新列表有兩種方式:

1. 在源數組上調用變更方法:

todos.value.push(newTodo)

2. 使用新的數組替代原數組:

todos.value = todos.value.filter(/* ... */)

實作

這裡有一個簡單的 todo 列表——試著實現一下 addTodo() 和 removeTodo() 這兩個方法的邏輯,使列表能夠正常工作!

<script setup>
import { ref } from 'vue'

// 給每個 todo 對象一個唯一的 id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  // ...
  newTodo.value = ''
}

function removeTodo(todo) {
  // ...
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

完成

我自己的寫法

<script setup>
import { ref } from 'vue'

// 給每個 todo 對象一個唯一的 id
let id = 0

const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({id: id++,text: newTodo.value})
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value.pop({id: todo.id,text: todo.text})
}
</script>

<template>
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" required placeholder="new todo">
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

網站答案

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}

https://ithelp.ithome.com.tw/upload/images/20240923/20169210FOXXSp6dGT.pnghttps://ithelp.ithome.com.tw/upload/images/20240923/201692101HCqVzLb8B.png


上一篇
vue3鍊成術第八天-表單綁定(實作)
下一篇
vue3鍊成術第十天-計算屬性(實作)
系列文
自學vue~點亮Roadmap過程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言